/*
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      padding: 10px;
    }
*/
    .accordion-container {
      width: 95%;
      max-width: 90%;
      margin: 0 auto;
    }

    details {
      background-color: white;/* Fond blanc du contenu*/
      margin: 10px 10px 10px 20px; /* marge haut/droite/bas = 10px, gauche = 20px */
      border-bottom: 1px solid #e0efb4;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;/* ombrage*/
    }

    summary {      
      background-color: #d7edd6;/* Fond vert clair */
      font-size: 19px; /*hauteur du titre*/
      
      /* Hauteur minimale + centrage vertical */
      min-height: 10px;/* hauteur du vert*/
      padding: 10px 40px 10px 15px; /* espace pour l'icône à droite */
      
      /* Ombre portée */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      
      /* Curseur pointeur */
      cursor: pointer;
      
      /* Typographie */
      font-weight: bold;
      color: #000;
      
      /* Position relative pour positionner l'icône */
      position: relative;
      list-style: none; /* supprime la flèche par défaut */
    }

    /* Icône triangulaire à droite (flèche) */
    summary::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%) rotate(0deg);
      width: 0;
      height: 0;
      border-left: 7.5px solid transparent;
      border-right: 7.5px solid transparent;
      border-top: 10px solid black; /* triangle noir vers le haut */
      transition: transform 0.3s ease;
    }

    /* Rotation de l'icône quand ouvert */
    details[open] summary::after {
      transform: translateY(-50%) rotate(180deg); /* triangle vers le bas */
    }

    /* Animation d'ouverture/fermeture */
    details > * {
      transition: all 0.3s ease;
    }

    /* Contenu de l'accordéon */
    details div {
      padding: 15px;
      background-color: #fff;
      border-top: 1px solid #eee;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
     details p {
      padding: 15px 10px 0px 10px ;
      font-size: 105%;
      color: blue;
    }

    /* Effet d'animation d'apparition du contenu */
    details div {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
    }

    details[open] div {
      max-height: 200px; /* ajuste selon besoin */
      opacity: 1;
    }

    /*

        <div class="accordion">
    
    */